<template>
  <tbc-dialog ref="dialog" title="商品类型" width="700px" basic>
    <el-row type="flex" style="flex-wrap: wrap;" justify="center">
      <div v-for="(item, index) in typeList"
           :key="index" @click="onTypeItemClick(item)"
           style="margin:20px;text-align: center;border:1px solid #CCC;cursor:pointer;border-radius: 4px;padding: 30px">
        {{ item.label }}
      </div>
    </el-row>
  </tbc-dialog>
</template>
<script lang="ts">
import {ref, defineComponent, Ref} from 'vue'
import {useRouter} from 'vue-router'

export default defineComponent({
  name: 'type-selector',
  setup() {
    const router = useRouter()
    const typeList = [
      {label: '普通商品', code: 'general', value: 1, desc: ''},
      {label: '虚拟商品', code: 'virtual', value: 2, desc: ''},
      {label: '资源商品', code: 'resource', value: 3, desc: ''},
    ]
    let query = {type: ''}
    const dialog: Ref = ref(null)
    const show = (queryParams: any) => {
      if (typeof queryParams === 'undefined') queryParams = {}
      query = queryParams
      dialog.value.show()
    }

    const onTypeItemClick = (item: { code: string }) => {
      query.type = item.code
      router.push({name: 'goods-add', query})
      dialog.value.close()
    }
    return {
      typeList,
      dialog,
      show,
      onTypeItemClick
    }
  }
})
</script>